<template>
  <div class="calorie-compare-card">
    <div class="calorie-header">今日卡路里对比</div>
    <div class="calorie-row">
      <div class="calorie-item in">
        <div class="calorie-label">摄入卡路里</div>
        <div class="calorie-value green">{{ intake }}kcal</div>
      </div>
      <div class="calorie-item out">
        <div class="calorie-label">消耗卡路里</div>
        <div class="calorie-value red">{{ consume }}kcal</div>
      </div>
    </div>
    <div class="calorie-net">净摄入：<span :class="netClass">{{ net }}kcal</span></div>
    <div class="calorie-progress-bar">
      <div class="calorie-progress-inner" :style="{width: progress + '%'}"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from 'vue'
import request from '@/utils/request'
import eventBus from '@/utils/eventBus'

const intake = ref(0)
const consume = ref(0) // 消耗卡路里，后续可对接运动等
const net = computed(() => intake.value - consume.value)
const netClass = computed(() => net.value >= 0 ? 'red' : 'green')
const progress = computed(() => {
  const total = intake.value + consume.value
  return total > 0 ? Math.abs(intake.value / total * 100) : 0
})

const fetchCalorie = async () => {
  const today = new Date().toISOString().slice(0, 10)
  const res = await request.get('/sport/diet/', { params: { date: today } })
  intake.value = res.total_calorie || 0
  // consume.value 可对接运动消耗接口
}

onMounted(() => {
  fetchCalorie()
  eventBus.on('diet-updated', fetchCalorie)
})
onUnmounted(() => {
  eventBus.off('diet-updated', fetchCalorie)
})
</script>

<style scoped>
.calorie-compare-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(114,46,209,0.08);
  padding: 20px 32px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.calorie-header {
  font-size: 17px;
  color: #722ed1;
  font-weight: bold;
  margin-bottom: 10px;
}
.calorie-row {
  display: flex;
  gap: 32px;
  margin-bottom: 8px;
}
.calorie-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.calorie-label {
  font-size: 14px;
  color: #888;
  margin-bottom: 2px;
}
.calorie-value {
  font-size: 20px;
  font-weight: bold;
}
.green {
  color: #52c41a;
}
.red {
  color: #ff4d4f;
}
.calorie-net {
  font-size: 15px;
  margin-bottom: 6px;
}
.calorie-progress-bar {
  width: 100%;
  height: 8px;
  background: #f3e6ff;
  border-radius: 4px;
  overflow: hidden;
}
.calorie-progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
  border-radius: 4px;
  transition: width 0.3s;
}
</style> 